<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /* background: rgb(204 246 214); */
            font-size: 26px;
        }
        /* ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            width: 100%;
        }
        li{
            width: 25%;
            height: 200px;
            box-sizing: border-box;
            padding-top: 1%;
            padding-left: 20px;
            border: 1px solid #6b6a6a;
        } */
        /* ul{
            display: grid;
            grid-template-columns: repeat(4, 25%);
            grid-template-rows: repeat(7, 184px);
            list-style: none;
        }
        li{
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 20px;
            border: 1px solid #6b6a6a;
        } */
        table,tbody{
            width: 100%;
            border-collapse: collapse;
        }
        
        td{
            width: 25%;
            height: 184px;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 30px;
            vertical-align: top;
            border: 1px solid #6b6a6a;
        }

        h1{
            margin-top: 5px;
            font-size: 24px;
        }

        #app{
            width: 990px;
            margin: 0 auto;
        }

        .res{
            font-size: 18px;
        }
    </style>

    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tbody>
                <tr v-for="tr in list">
                    <td v-for="td in tr">{{td.CQ}}=</td>
                </tr>
            </tbody>
        </table>
        <h1>豆子最棒！！！！</h1>
        <p class="res"><span v-for="(res,index) in resList">({{index+1}}) {{res.res}}； </span></p>
    </div>
    

    <script>
        function random(n,m){
            n=parseInt(n)
            m=parseInt(m)
            return Math.round(n + Math.random() * (m - n))
        }

        const seed = []
        const seedSys = []
        for(let i=1;i<=9;i++){
            for(let j=i;j<=9;j++){
                if(i>1){
                    seed.push({
                        product:i*j,
                        nums:[i,j]
                    })
                }
                seedSys.push({
                    product:i*j,
                    nums:[i,j]
                })
            }
        }


        const symbol = ['+','-','×','÷','×','÷'];   //为了让后面一个是乘除法的概率更高一点
        const symbolNoX = ['+','-','÷']
        function createCQ(){
            let o1 = random(0,3)
            let o2 = random(0, o1>=2?1:5)
            let orgs1 = symbol[random(0,3)];
            let orgs2 = orgs1=='×'?symbolNoX[random(0,2)]:symbol[random(0,3)];
            let bracket = !!random(0,1)
            let num1 = '';
            let num2 = '';
            let num3 = '';

            let CQ = ''

            if(bracket && !(orgs1=='+' && orgs2 == '+')){
                if(orgs1=='×' && orgs2 == '+'){
                    const s = random(2, 10)
                    num2 = random(1, s-1);
                    num3 = s-num2;
                    num1 = random(2, 10)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='×' && orgs2 == '-'){
                    const diff = random(1, 10)
                    num2 = random(10, 99);
                    num3 = num2 - diff;
                    num1 = random(1, 10)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='×' && orgs2 == '÷'){
                    const quot = seed[random(0, seed.length-1)]
                    num2 = quot.product;
                    num3 = num2 / quot.nums[random(0, 1)];
                    num1 = random(1, 10)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='÷' && orgs2 == '+'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    num1 = quot.product;
                    num2 = a - random(1, a-1);
                    num3 = a - num2
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='÷' && orgs2 == '-'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    num1 = quot.product;
                    num2 = random(a+1, 99);
                    num3 = num2 - a
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='÷' && orgs2 == '×'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    const arr = seedSys.filter(item=>item.product == a)
                    const ac = arr[random(0, arr.length - 1)]
                    num1 = quot.product;
                    num2 = ac.nums[random(0, 1)];
                    num3 = a / num2
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='+' && orgs2 == '-'){
                    num1 = random(20, 99)
                    num2 = random(50, 99)
                    num3 = random(1, num2)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='+' && orgs2 == '×'){
                    const s = random(3, 10)
                    num1 = random(1, s-1)
                    num2 = s - num1
                    num3 = random(1, 10)
                    CQ = `(${num1}${orgs1}${num2})${orgs2}${num3}`
                }else if(orgs1=='+' && orgs2 == '÷'){
                    const quot = seed[random(0, seed.length-1)]
                    const s = quot.product
                    num1 = random(1, s-1)
                    num2 = s - num1
                    num3 = quot.nums[random(0, 1)]
                    CQ = `(${num1}${orgs1}${num2})${orgs2}${num3}`
                }else if(orgs1=='-' && orgs2 == '+'){
                    num1 = random(30, 99)
                    num2 = random(1, num1/1.5)
                    num3 = random(1, num1-num2-1)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='-' && orgs2 == '-'){
                    num1 = random(40, 99)
                    num2 = random(10, num1-1)
                    num3 = random(1, num2)
                    CQ = `${num1}${orgs1}(${num2}${orgs2}${num3})`
                }else if(orgs1=='-' && orgs2 == '×'){
                    const s = random(3, 10)
                    num1 = random(s, 99)
                    num2 = num1 - s
                    num3 = random(1, 10)
                    CQ = `(${num1}${orgs1}${num2})${orgs2}${num3}`
                }else if(orgs1=='-' && orgs2 == '÷'){
                    const quot = seed[random(0, seed.length-1)]
                    const s = quot.product
                    num1 = random(s, 100)
                    num2 = num1 - s
                    num3 = quot.nums[random(0, 1)]
                    CQ = `(${num1}${orgs1}${num2})${orgs2}${num3}`
                }
            }else{
                if(orgs1=='×' && orgs2 == '+'){
                    num1 = random(2, 10)
                    num2 = random(2, 10);
                    num3 = random(10, 99);
                }else if(orgs1=='×' && orgs2 == '-'){
                    num1 = random(2, 10)
                    num2 = random(2, 10);
                    num3 = random(1, num1 * num2 -1);
                }else if(orgs1=='×' && orgs2 == '×'){
                    //暂无

                }else if(orgs1=='×' && orgs2 == '÷'){
                    

                }else if(orgs1=='÷' && orgs2 == '+'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    num1 = quot.product;
                    num2 = a;
                    num3 = random(10, 100)
                }else if(orgs1=='÷' && orgs2 == '-'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    num1 = quot.product;
                    num2 = a;
                    num3 = random(1, num1 / num2)
                }else if(orgs1=='÷' && orgs2 == '×'){
                    const quot = seed[random(0, seed.length-1)]
                    const a = quot.nums[random(0, 1)]
                    num1 = quot.product;
                    num2 = a;
                    num3 = random(2, 10)
                }else if(orgs1=='+' && orgs2 == '+'){
                    num1 = random(10, 50)
                    num2 = random(10, 50)
                    num3 = random(10, 50)
                }else if(orgs1=='+' && orgs2 == '-'){
                    num1 = random(20, 99)
                    num2 = random(50, 99)
                    num3 = random(1, (num1 + num2)>99?99:(num1 + num2))
                }else if(orgs1=='+' && orgs2 == '×'){
                    num1 = random(10,99)
                    num2 = random(2, 10)
                    num3 = random(2, 10)
                }else if(orgs1=='+' && orgs2 == '÷'){
                    const quot = seed[random(0, seed.length-1)]
                    const s = quot.product
                    num1 = random(10, 99)
                    num2 = s
                    num3 = quot.nums[random(0, 1)]
                }else if(orgs1=='-' && orgs2 == '+'){
                    num1 = random(30, 99)
                    num2 = random(10, num1)
                    num3 = random(10, 99)
                }else if(orgs1=='-' && orgs2 == '-'){
                    num1 = random(40, 99)
                    num2 = random(10, num1-5)
                    num3 = random(1, num1 - num2)
                }else if(orgs1=='-' && orgs2 == '×'){
                    num2 = random(1, 10)
                    num3 = random(1, 10)
                    num1 = random(num2 * num3, 100)
                }else if(orgs1=='-' && orgs2 == '÷'){
                    const quot = seed[random(0, seed.length-1)]
                    const s = quot.product
                    num1 = random(15, 99)
                    num2 = s
                    num3 = quot.nums[random(0, 1)]
                }

                if(num1 && orgs1 && num2 && orgs2 && num3){
                    CQ = `${num1}${orgs1}${num2}${orgs2}${num3}`
                }
                
            }

            if(CQ){
                const cr = CQ.replace('×','*').replace('÷','/')
                return {
                    CQ,
                    res: eval(cr)
                }
            }else{
                return createCQ()
            }
        }
        // for(let i=0;i<1000;i++){
        //     const n = createCQ().res
        //     if(n<0){
        //         console.log(n)
        //     }
        // }
        // console.log('ok')

        new Vue({
            el:'#app',
            data:{
                list: [],
                resList: []
            },
            methods:{
                
            },
            created(){
                let list = []
                let resList = []
                for(let i=0;i<7;i++){
                    const td = []
                    for(let j=0;j<4;j++){
                        const n = createCQ()
                        td.push(n)
                        resList.push(n)
                    }
                    list.push(td)
                }
                console.log(list)
                this.list = list
                this.resList = resList
            }
        })
    </script>
</body>
</html>